<template>
  <a-form-item :label="widget.name" :prop="widget.model">
    <a-input
      v-if="widget.options.dataType === 'number'
      || widget.options.dataType === 'integer'
      || widget.options.dataType === 'float'"
      type="number"
      v-model.number="dataModel"
      :placeholder="widget.options.placeholder"
      :style="{width: widget.options.width}"
      :disabled="widget.options.disabled"
    ></a-input>
    <a-input
      v-else
      :type="widget.options.dataType"
      v-model="dataModel"
      :disabled="widget.options.disabled"
      :placeholder="widget.options.placeholder"
      :style="{width: widget.options.width}"
    ></a-input>
  </a-form-item>
</template>
<script>
export default {
  props: ['widget', 'model', 'rules'],
  data () {
    return {
      dataModel: this.models[this.widget.model]
    }
  },
  created () {
    if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
      this.remote[this.widget.options.remoteFunc]((data) => {
        this.widget.options.remoteOptions = data.map(item => {
          return {
            value: item[this.widget.options.props.value],
            label: item[this.widget.options.props.label],
            children: item[this.widget.options.props.children]
          }
        })
      })
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler (val) {
        this.models[this.widget.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
        this.$emit('input-change', val, this.widget.model)
      }
    },
    models: {
      deep: true,
      handler (val) {
        this.dataModel = val[this.widget.model]
      }
    }
  }
}
</script>
